<template>
    <div>
      <!-- 查询列表 -->
      <div style="padding: 5px; text-align: left">
        <el-form
          :inline="true"
          :model="saleReturnSelect"
          class="demo-form-inline"
        >
          <el-form-item label="退货编号：">
            <el-input
              v-model="saleReturnSelect.salesReturnCode"
              style="width: 100px"
              placeholder="退货编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="采购单号：">
            <el-input
              v-model="saleReturnSelect.procurementCode"
              style="width: 100px"
              placeholder="采购单号"
            ></el-input>
          </el-form-item>
          <el-form-item label="产品名称：">
            <el-input
              v-model="saleReturnSelect.productName"
              style="width: 130px"
              placeholder="产品名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="订单状态：">
            <el-select
              v-model="saleReturnSelect.returnState"
              placeholder="请选择"
              style="width: 140px"
            >
              <el-option label="全部" :value="0"> </el-option>
              <el-option label="待审核" :value="1"> </el-option>
              <el-option label="审核成功" :value="2"> </el-option>
              <el-option label="审核失败" :value="3"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="GetPageProductProcList"
              icon="el-icon-search"
              >查询</el-button
            >
            <el-button plain @click="empty()" icon="el-icon-refresh-left"
              >重置</el-button
            >
  
            <el-button
              class="btn"
              icon="el-icon-delete"
              @click="DeleteList()"
              type="danger"
              >删除</el-button
            >
            <el-button
              class="btn"
              icon="el-icon-upload2"
              @click="exportExcel(saleReturnList)"
              >导出</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div style="padding: 5px; text-align: left">
        <el-table
          :data="saleReturnList"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="salesReturnCode" label="退货单号">
          </el-table-column>
          <el-table-column prop="productName" label="产品名称" width="80">
          </el-table-column>
          <el-table-column prop="productCode" label="产品编号" width="80">
          </el-table-column>
          <el-table-column prop="specs" label="产品规格" width="80">
          </el-table-column>
          <el-table-column prop="packageType" label="单位" width="80">
          </el-table-column>
          <el-table-column prop="price" label="单价" width="80">
          </el-table-column>
          <el-table-column prop="returnNumber" label="退货数">
          </el-table-column>
          <el-table-column prop="sumPrice" label="总额"> </el-table-column>
          <el-table-column prop="procurementCode" label="采购单号"> </el-table-column>
          <el-table-column prop="supplierName" label="供应商名称"> </el-table-column>
          <el-table-column prop="returnState" label="状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.returnState == 1" type="success">待审核</el-tag>
              <el-tag v-if="scope.row.returnState == 2" type="danger">审核成功</el-tag>
              <el-tag v-if="scope.row.returnState == 3" type="danger">审核失败</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="userTime" label="创建时间">
            <template slot-scope="scope">
              <span>{{ scope.row.userTime.substring(0, 10) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="Inset(scope.row.id)"
                icon="el-icon-remove"
                >查看</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="DelProcuremenReturn(scope.row.id)"
                icon="el-icon-remove"
                >删除</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="Audit(scope.row.id)"
                v-if="scope.row.returnState == 1"
                >审核</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block" style="text-align: center">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="saleReturnSelect.pageIndex"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="saleReturnSelect.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            next-text="下一页"
            prev-text="上一页"
          >
          </el-pagination>
        </div>
  
        <!-- 弹框 -->
        <el-dialog title="采购退货详情" :visible.sync="dialogFormVisible">
          <!-- 用户类型 -->
          <el-descriptions v-model="saleReturn">
            <el-descriptions-item label="退货单号">{{
              saleReturn.salesReturnCode
            }}</el-descriptions-item>
            <el-descriptions-item label="单据类型">
              <span v-if="saleReturn.documentType == 1">实际订单</span>
              <span v-if="saleReturn.documentType == 2">虚拟订单</span>
            </el-descriptions-item>
            <el-descriptions-item label="单据状态">
              <span v-if="saleReturn.returnState == 1">待审核</span>
              <span v-if="saleReturn.returnState == 2">审核成功</span>
              <span v-if="saleReturn.returnState == 3">审核失败</span>
            </el-descriptions-item>
            <el-descriptions-item label="采购单号">{{
              saleReturn.procurementCode
            }}</el-descriptions-item>
            <el-descriptions-item label="制单人">{{
              saleReturn.clientName
            }}</el-descriptions-item>
            <el-descriptions-item label="制单日期">{{
              saleReturn.createTime
            }}</el-descriptions-item>
            <el-descriptions-item label="联系人">{{
              saleReturn.clientName
            }}</el-descriptions-item>
            <el-descriptions-item label="供应商编号">{{
              saleReturn.supplierCode
            }}</el-descriptions-item>
            <el-descriptions-item label="供应商名称">{{
              saleReturn.supplierName
            }}</el-descriptions-item>
            <el-descriptions-item label="电话">{{
              saleReturn.phone
            }}</el-descriptions-item>
            <el-descriptions-item label="备注">{{
              saleReturn.remark
            }}</el-descriptions-item>
          </el-descriptions>

          <el-table border style="width: 100%" :data="Productlist">
            <el-table-column
              prop="productCode"
              label="产品编码"
            ></el-table-column>
            <el-table-column prop="productName" label="产品名称">
            </el-table-column>
            <el-table-column prop="specs" label="规格"> </el-table-column>
            <el-table-column prop="packageType" label="单位"> </el-table-column>
            <el-table-column prop="inventory" label="数量"> </el-table-column>
            <el-table-column prop="returnNumber" label="退货数">
            </el-table-column>
            <el-table-column prop="price" label="单价"> </el-table-column>
            <el-table-column prop="sumPrice" label="总额"> </el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            
          </div>
        </el-dialog>
      </div>
      <!-- 弹框审核 -->
      <el-dialog title="审核" :visible.sync="dialogFormVisible1">
        <el-radio-group v-model="radio">
          <el-radio :label="2">通过</el-radio>
          <el-radio :label="3">拒绝</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="AuditInfo()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  <script>
    import {
        GetPageProductProcList,
        UpProcuremenReturnState,
        PlDelProcuremenReturn,
        DelProcuremenReturn,
        AddCollection,
        GetProductProcLists,
        GetProductProcList
    } from "@/api/BusinessServers/PurchaseReturns";
  import XLSX from "xlsx";
  export default {
    data() {
      return {
        List: [],
        radio: 2,
        dialogFormVisible1: false,
        saleReturn: {},
        dialogFormVisible: false,
        saleReturnList: [],
        totalCount: 0,
        saleReturnSelect: {
          salesReturnCode: "",
          procurementCode: "",
          productName: "",
          returnState: 0,
          pageIndex: 1,
          pageSize: 5,
        },
        Productlist: [],
        Id: 0,
      };
    },
    methods: {
      handleSelectionChange(val) {
        this.List = val;
      },
      //导出
      exportExcel(form) {
        //excel数据导出
        // 过滤需要导出的字段
        const filteredData = form.map((item) => {
          return {
            退货单号: item.salesReturnCode,
            产品名称: item.productName,
            产品编号: item.productCode,
            产品规格: item.specs,
            单位: item.packageType,
            单价: item.price,
            退货数: item.returnNumber,
            总额: item.sumPrice,
            采购单号: item.procurementCode,
            供应商名称: item.supplierName,
            状态: item.returnState,
            创建时间: item.userTime,
          };
        });
        const worksheet = XLSX.utils.json_to_sheet(filteredData);
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
        // 导出Excel文件
        XLSX.writeFile(workbook, "采购退货列表.xlsx");
      },
      //修改每页显示条数
      handleSizeChange(val) {
        this.saleReturnSelect.pageSize = val;
        this.GetPageProductProcList();
      },
      //修改每页页数
      handleCurrentChange(val) {
        this.saleReturnSelect.pageIndex = val;
        this.GetPageProductProcList();
      },
      //显示
      GetPageProductProcList() {
        GetPageProductProcList(this.saleReturnSelect).then((res) => {
          this.saleReturnList = res.data.data;
          this.totalCount = res.data.totalCount; //总条数
        });
      },
      //清空
      empty() {
        this.saleReturnSelect.salesReturnCode = "";
        this.saleReturnSelect.procurementCode = "";
        this.saleReturnSelect.productName = "";
        this.saleReturnSelect.returnState = 0;
      },
      //查看
      Inset(Id) {
        this.dialogFormVisible = true;
        var data = {
          id: Id,
        };
        GetProductProcList(data).then((res) => {
          this.saleReturn = res.data;
        });
        GetProductProcLists(data).then(res=>{
            this.Productlist = res.data;
        })
      },
      Audit(id) {
        this.dialogFormVisible1 = true;
        this.Id = id;
      },
      //审核
      AuditInfo() {
        var data = {
          id: this.Id,
          returnState: this.radio,
        };
        UpProcuremenReturnState(data).then((res) => {
          if (res.data.data) {
            this.$message({
              message: "审核成功",
              type: "success",
            });
            this.dialogFormVisible1 = false;
            this.GetPageProductProcList();
            this.AddCollection();
          } else {
            this.$message({
              message: "审核失败",
              type: "error",
            });
          }
        });
      },
      //添加应收管理
      AddCollection() {
        var data = {
          id: this.Id,
        };
        AddCollection(data).then((res) => {
          if (res.data.data) {
            this.$message({
              message: "添加应收表成功",
              type: "success",
            });
            this.dialogFormVisible1 = false;
            this.GetPageProductProcList();
          } 
        });
      },
      //批量删除
      DeleteList() {
        if (this.List.length == 0) {
          this.$message.error("请至少选择一项！");
          return;
        }
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            PlDelProcuremenReturn(this.List).then((res) => {
              if (res.data.data) {
                this.$message({
                  type: "success",
                  message: "批量删除成功!",
                });
                this.GetPageProductProcList();
              } else {
                this.$message({
                  type: "error",
                  message: "批量删除失败!",
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      //删除
      DelProcuremenReturn(id){
        var data={
            id:id
        }
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            DelProcuremenReturn(data).then((res) => {
              if (res.data.data) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.GetPageProductProcList();
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败!",
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    created() {
      this.GetPageProductProcList();
    },
  };
  </script>
  <style>
  </style>